<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>Hello World</title>

    <!-- required modeler styles -->
    <link rel="stylesheet" href="https://unpkg.com/bpmn-js@8.7.1/dist/assets/diagram-js.css">
    <link rel="stylesheet" href="https://unpkg.com/bpmn-js@8.7.1/dist/assets/bpmn-font/css/bpmn.css">

    <!-- modeler distro -->
    <script src="https://unpkg.com/bpmn-js@8.7.1/dist/bpmn-modeler.development.js"></script>

    <!-- needed for this example only -->
    <script src="https://unpkg.com/jquery@3.3.1/dist/jquery.js"></script>

    <!-- example styles -->
    <style>
        html, body, #canvas {
            height: 100%;
            padding: 0;
            margin: 0;
        }

        #save-button {
            position: fixed;
            bottom: 20px;
            left: 20px;
        }
    </style>
</head>
<body>
<div id="canvas"></div>

<button id="save-button">print to console</button>

<script>

    var diagramUrl = 'https://cdn.staticaly.com/gh/bpmn-io/bpmn-js-examples/dfceecba/starter/diagram.bpmn';

    // modeler instance
    var bpmnModeler = new BpmnJS({
        container: '#canvas',
        keyboard: {
            bindTo: window
        }
    });

    /**
     * Save diagram contents and print them to the console.
     */
    async function exportDiagram() {
        try {
            var result = await bpmnModeler.saveXML({ format: true });

            var xml = "<?xml version=\"1.0\" encoding=\"UTF-8\"?>\n" +
                "<definitions xmlns=\"http://www.omg.org/spec/BPMN/20100524/MODEL\" xmlns:xsi=\"http://www.w3.org/2001/XMLSchema-instance\" xmlns:activiti=\"http://activiti.org/bpmn\" xmlns:bpmndi=\"http://www.omg.org/spec/BPMN/20100524/DI\" xmlns:omgdc=\"http://www.omg.org/spec/DD/20100524/DC\" xmlns:omgdi=\"http://www.omg.org/spec/DD/20100524/DI\" xmlns:xsd=\"http://www.w3.org/2001/XMLSchema\" targetNamespace=\"http://www.activiti.org/test\">\n" +
                "  <process id=\"BRF\" name=\"BRF\" isExecutable=\"true\">\n" +
                "    <extensionElements>\n" +
                "      <activiti:executionListener delegateExpression=\"${processEndListener}\" event=\"end\" />\n" +
                "    </extensionElements>\n" +
                "    <startEvent id=\"startevent1\" name=\"Start\" />\n" +
                "    <endEvent id=\"S990\" name=\"End\" />\n" +
                "    <userTask id=\"S020\" name=\"020\">\n" +
                "      <extensionElements>\n" +
                "        <activiti:taskListener delegateExpression=\"${draftListener}\" event=\"all\" />\n" +
                "      </extensionElements>\n" +
                "    </userTask>\n" +
                "    <userTask id=\"BRF100\" name=\"Review\">\n" +
                "      <extensionElements>\n" +
                "        <activiti:taskListener delegateExpression=\"${reviewListener}\" event=\"all\" />\n" +
                "      </extensionElements>\n" +
                "      <multiInstanceLoopCharacteristics isSequential=\"true\">\n" +
                "        <loopCardinality>10</loopCardinality>\n" +
                "        <completionCondition>${reviewState.equals(\"end\")}</completionCondition>\n" +
                "      </multiInstanceLoopCharacteristics>\n" +
                "    </userTask>\n" +
                "    <userTask id=\"BRF110\" name=\"Cosign\">\n" +
                "      <extensionElements>\n" +
                "        <activiti:taskListener delegateExpression=\"${universalListener}\" event=\"all\" />\n" +
                "      </extensionElements>\n" +
                "    </userTask>\n" +
                "    <endEvent id=\"S980\" name=\"End\" />\n" +
                "    <sequenceFlow id=\"flow1\" sourceRef=\"startevent1\" targetRef=\"S020\" />\n" +
                "    <sequenceFlow id=\"flow2\" sourceRef=\"S020\" targetRef=\"BRF100\">\n" +
                "      <conditionExpression xsi:type=\"tFormalExpression\">${transition.equals(\"Submit\")}</conditionExpression>\n" +
                "    </sequenceFlow>\n" +
                "    <sequenceFlow id=\"flow3\" sourceRef=\"BRF100\" targetRef=\"BRF110\">\n" +
                "      <conditionExpression xsi:type=\"tFormalExpression\">${transition.equals(\"Submit\")}</conditionExpression>\n" +
                "    </sequenceFlow>\n" +
                "    <sequenceFlow id=\"flow5\" sourceRef=\"S020\" targetRef=\"S990\">\n" +
                "      <conditionExpression xsi:type=\"tFormalExpression\">${transition.equals(\"Viod\")}</conditionExpression>\n" +
                "    </sequenceFlow>\n" +
                "    <sequenceFlow id=\"flow6\" sourceRef=\"BRF100\" targetRef=\"S020\">\n" +
                "      <conditionExpression xsi:type=\"tFormalExpression\">${transition.equalsIgnoreCase(\"Reject\")}</conditionExpression>\n" +
                "    </sequenceFlow>\n" +
                "    <sequenceFlow id=\"flow7\" sourceRef=\"BRF110\" targetRef=\"S020\">\n" +
                "      <conditionExpression xsi:type=\"tFormalExpression\">${transition.equalsIgnoreCase(\"Reject\")}</conditionExpression>\n" +
                "    </sequenceFlow>\n" +
                "    <userTask id=\"BRF120\" name=\"Confirm\">\n" +
                "      <extensionElements>\n" +
                "        <activiti:taskListener delegateExpression=\"${universalListener}\" event=\"all\" />\n" +
                "      </extensionElements>\n" +
                "    </userTask>\n" +
                "    <sequenceFlow id=\"flow9\" sourceRef=\"BRF120\" targetRef=\"S980\">\n" +
                "      <conditionExpression xsi:type=\"tFormalExpression\">${transition.equals(\"Submit\")}</conditionExpression>\n" +
                "    </sequenceFlow>\n" +
                "    <userTask id=\"BRF111\" name=\"Cosign\">\n" +
                "      <extensionElements>\n" +
                "        <activiti:taskListener delegateExpression=\"${universalListener}\" event=\"all\" />\n" +
                "      </extensionElements>\n" +
                "    </userTask>\n" +
                "    <sequenceFlow id=\"flow10\" sourceRef=\"BRF110\" targetRef=\"BRF111\">\n" +
                "      <conditionExpression xsi:type=\"tFormalExpression\">${transition.equals(\"Submit\")}</conditionExpression>\n" +
                "    </sequenceFlow>\n" +
                "    <sequenceFlow id=\"flow11\" sourceRef=\"BRF111\" targetRef=\"BRF120\">\n" +
                "      <conditionExpression xsi:type=\"tFormalExpression\">${transition.equals(\"Submit\")}</conditionExpression>\n" +
                "    </sequenceFlow>\n" +
                "    <sequenceFlow id=\"flow12\" sourceRef=\"BRF111\" targetRef=\"S020\">\n" +
                "      <conditionExpression xsi:type=\"tFormalExpression\">${transition.equalsIgnoreCase(\"Reject\")}</conditionExpression>\n" +
                "    </sequenceFlow>\n" +
                "  </process>\n" +
                "  <bpmndi:BPMNDiagram id=\"BPMNDiagram_BRF\">\n" +
                "    <bpmndi:BPMNPlane id=\"BPMNPlane_BRF\" bpmnElement=\"BRF\">\n" +
                "      <bpmndi:BPMNEdge id=\"BPMNEdge_flow12\" bpmnElement=\"flow12\">\n" +
                "        <omgdi:waypoint x=\"337\" y=\"420\" />\n" +
                "        <omgdi:waypoint x=\"511\" y=\"207\" />\n" +
                "        <omgdi:waypoint x=\"337\" y=\"145\" />\n" +
                "      </bpmndi:BPMNEdge>\n" +
                "      <bpmndi:BPMNEdge id=\"BPMNEdge_flow11\" bpmnElement=\"flow11\">\n" +
                "        <omgdi:waypoint x=\"337\" y=\"475\" />\n" +
                "        <omgdi:waypoint x=\"335\" y=\"531\" />\n" +
                "      </bpmndi:BPMNEdge>\n" +
                "      <bpmndi:BPMNEdge id=\"BPMNEdge_flow10\" bpmnElement=\"flow10\">\n" +
                "        <omgdi:waypoint x=\"337\" y=\"355\" />\n" +
                "        <omgdi:waypoint x=\"337\" y=\"420\" />\n" +
                "      </bpmndi:BPMNEdge>\n" +
                "      <bpmndi:BPMNEdge id=\"BPMNEdge_flow9\" bpmnElement=\"flow9\">\n" +
                "        <omgdi:waypoint x=\"335\" y=\"586\" />\n" +
                "        <omgdi:waypoint x=\"335\" y=\"640\" />\n" +
                "      </bpmndi:BPMNEdge>\n" +
                "      <bpmndi:BPMNEdge id=\"BPMNEdge_flow7\" bpmnElement=\"flow7\">\n" +
                "        <omgdi:waypoint x=\"337\" y=\"300\" />\n" +
                "        <omgdi:waypoint x=\"466\" y=\"213\" />\n" +
                "        <omgdi:waypoint x=\"337\" y=\"145\" />\n" +
                "      </bpmndi:BPMNEdge>\n" +
                "      <bpmndi:BPMNEdge id=\"BPMNEdge_flow6\" bpmnElement=\"flow6\">\n" +
                "        <omgdi:waypoint x=\"390\" y=\"222\" />\n" +
                "        <omgdi:waypoint x=\"417\" y=\"213\" />\n" +
                "        <omgdi:waypoint x=\"337\" y=\"145\" />\n" +
                "      </bpmndi:BPMNEdge>\n" +
                "      <bpmndi:BPMNEdge id=\"BPMNEdge_flow5\" bpmnElement=\"flow5\">\n" +
                "        <omgdi:waypoint x=\"285\" y=\"117\" />\n" +
                "        <omgdi:waypoint x=\"235\" y=\"117\" />\n" +
                "      </bpmndi:BPMNEdge>\n" +
                "      <bpmndi:BPMNEdge id=\"BPMNEdge_flow3\" bpmnElement=\"flow3\">\n" +
                "        <omgdi:waypoint x=\"337\" y=\"250\" />\n" +
                "        <omgdi:waypoint x=\"337\" y=\"300\" />\n" +
                "      </bpmndi:BPMNEdge>\n" +
                "      <bpmndi:BPMNEdge id=\"BPMNEdge_flow2\" bpmnElement=\"flow2\">\n" +
                "        <omgdi:waypoint x=\"337\" y=\"145\" />\n" +
                "        <omgdi:waypoint x=\"337\" y=\"195\" />\n" +
                "      </bpmndi:BPMNEdge>\n" +
                "      <bpmndi:BPMNEdge id=\"BPMNEdge_flow1\" bpmnElement=\"flow1\">\n" +
                "        <omgdi:waypoint x=\"337\" y=\"55\" />\n" +
                "        <omgdi:waypoint x=\"337\" y=\"90\" />\n" +
                "      </bpmndi:BPMNEdge>\n" +
                "      <bpmndi:BPMNShape id=\"BPMNShape_startevent1\" bpmnElement=\"startevent1\">\n" +
                "        <omgdc:Bounds x=\"320\" y=\"20\" width=\"35\" height=\"35\" />\n" +
                "      </bpmndi:BPMNShape>\n" +
                "      <bpmndi:BPMNShape id=\"BPMNShape_S990\" bpmnElement=\"S990\">\n" +
                "        <omgdc:Bounds x=\"200\" y=\"100\" width=\"35\" height=\"35\" />\n" +
                "      </bpmndi:BPMNShape>\n" +
                "      <bpmndi:BPMNShape id=\"BPMNShape_S020\" bpmnElement=\"S020\">\n" +
                "        <omgdc:Bounds x=\"285\" y=\"90\" width=\"105\" height=\"55\" />\n" +
                "      </bpmndi:BPMNShape>\n" +
                "      <bpmndi:BPMNShape id=\"BPMNShape_BRF100\" bpmnElement=\"BRF100\">\n" +
                "        <omgdc:Bounds x=\"285\" y=\"195\" width=\"105\" height=\"55\" />\n" +
                "      </bpmndi:BPMNShape>\n" +
                "      <bpmndi:BPMNShape id=\"BPMNShape_BRF110\" bpmnElement=\"BRF110\">\n" +
                "        <omgdc:Bounds x=\"285\" y=\"300\" width=\"105\" height=\"55\" />\n" +
                "      </bpmndi:BPMNShape>\n" +
                "      <bpmndi:BPMNShape id=\"BPMNShape_S980\" bpmnElement=\"S980\">\n" +
                "        <omgdc:Bounds x=\"318\" y=\"640\" width=\"35\" height=\"35\" />\n" +
                "      </bpmndi:BPMNShape>\n" +
                "      <bpmndi:BPMNShape id=\"BPMNShape_BRF120\" bpmnElement=\"BRF120\">\n" +
                "        <omgdc:Bounds x=\"283\" y=\"531\" width=\"105\" height=\"55\" />\n" +
                "      </bpmndi:BPMNShape>\n" +
                "      <bpmndi:BPMNShape id=\"BPMNShape_BRF111\" bpmnElement=\"BRF111\">\n" +
                "        <omgdc:Bounds x=\"285\" y=\"420\" width=\"105\" height=\"55\" />\n" +
                "      </bpmndi:BPMNShape>\n" +
                "    </bpmndi:BPMNPlane>\n" +
                "  </bpmndi:BPMNDiagram>\n" +
                "</definitions>\n";
            $.post('/processModeler/publish', {
                    xmlData: xml,
                    resourceName: 'BRF'
                },
                function() {
                    alert("部署成功");
                    $.get(diagramUrl, openDiagram, 'text');
                }
            );
        } catch (err) {
            console.error('could not save BPMN 2.0 diagram', err);
        }
    }

    /**
     * Open diagram in our modeler instance.
     *
     * @param {String} bpmnXML diagram to display
     */
    async function openDiagram(bpmnXML) {

        // import diagram
        try {
            await bpmnModeler.importXML(bpmnXML);

            // access modeler components
            var canvas = bpmnModeler.get('canvas');

            // zoom to fit full viewport
            canvas.zoom('fit-viewport');
        } catch (err) {

            console.error('could not import BPMN 2.0 diagram', err);
        }
    }


    // load external diagram file via AJAX and open it
    $.get(diagramUrl, openDiagram, 'text');

    // wire save button
    $('#save-button').click(exportDiagram);
</script>
</body>
</html>
